<template>
    <view class="auto-reply-page">
        <!-- 顶部导航栏 -->
        <view class="header">
            <uni-nav-bar :border="false" backgroundColor="#ffffff" statusBar>
                <template v-slot:left>
                    <view class="nav-left" @click="goBack">
                        <uni-icons type="back" size="20"></uni-icons>
                    </view>
                </template>
                <template v-slot:default>
                    <view class="nav-center">
                        <text class="nav-title">消息通知设置</text>
                    </view>
                </template>
            </uni-nav-bar>
        </view>

        <!-- 设置内容区域 -->
        <view class="settings-content">
            <!-- 请选择自动回复时间段 -->
            <view class="section-title">请选择自动回复时间段</view>
            <view class="settings-content-wrapper">
                <view class="settings-item">
                    <text class="item-label">全天</text>
                    <switch :checked="allDay" @change="toggleAllDay" color="#007AFF" style="transform: scale(0.7);" />
                </view>
                <view class="settings-item" v-if="!allDay" @click="showStartTimePicker">
                    <text class="item-label">开始</text>
                    <view class="item-right">
                        <text class="time-text">{{ startTime }}</text>
                        <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
                    </view>
                </view>
                <view class="settings-item" v-if="!allDay" @click="showEndTimePicker">
                    <text class="item-label">结束</text>
                    <view class="item-right">
                        <text class="time-text">{{ endTime }}</text>
                        <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
                    </view>
                </view>
            </view>

            <!-- 请输入自动回复的消息 -->
            <view class="section-title">请输入自动回复的消息</view>
            <view class="settings-content-wrapper">
                <view class="textarea-container">
                    <textarea class="reply-input" v-model="replyMessage" placeholder="请输入" :maxlength="50"
                        auto-height />
                    <text class="word-count">{{ replyMessage.length }}/50</text>
                </view>
            </view>
        </view>

        <!-- 底部保存按钮 -->
        <view class="save-button-container">
            <button class="save-button" @click="saveSettings">保存</button>
        </view>

        <!-- 时间选择器 -->
        <uni-popup ref="startTimePopup" type="bottom">
            <view class="popup-content">
                <view class="popup-header">
                    <text class="cancel-btn" @click="cancelTimePicker">取消</text>
                    <text class="confirm-btn" @click="confirmStartTime">确定</text>
                </view>
                <picker-view class="time-picker" :value="startTimeArray" @change="onStartTimeChange">
                    <picker-view-column>
                        <view class="picker-item" v-for="(hour, index) in hours" :key="index">{{ hour }}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view class="picker-item" v-for="(minute, index) in minutes" :key="index">{{ minute }}</view>
                    </picker-view-column>
                </picker-view>
            </view>
        </uni-popup>

        <uni-popup ref="endTimePopup" type="bottom">
            <view class="popup-content">
                <view class="popup-header">
                    <text class="cancel-btn" @click="cancelTimePicker">取消</text>
                    <text class="confirm-btn" @click="confirmEndTime">确定</text>
                </view>
                <picker-view class="time-picker" :value="endTimeArray" @change="onEndTimeChange">
                    <picker-view-column>
                        <view class="picker-item" v-for="(hour, index) in hours" :key="index">{{ hour }}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view class="picker-item" v-for="(minute, index) in minutes" :key="index">{{ minute }}</view>
                    </picker-view-column>
                </picker-view>
            </view>
        </uni-popup>
        <!-- 添加放弃更改确认弹出层 -->
        <uni-popup ref="exitConfirmPopup" type="bottom">
            <view class="confirm-popup">
                <view class="popup-main">
                    <view class="confirm-content">您确定放弃此次更改吗？</view>
                    <button class="confirm-btn" @click="confirmExit">放弃更改</button>
                </view>
                <view class="popup-footer">
                    <button class="cancel-btn" @click="cancelExit">取消</button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            allDay: false,
            startTime: '00:00',
            endTime: '23:59',
            replyMessage: '',
            hours: Array.from({ length: 24 }, (_, i) => i < 10 ? `0${i}` : `${i}`),
            minutes: Array.from({ length: 60 }, (_, i) => i < 10 ? `0${i}` : `${i}`),
            startTimeArray: [0, 0],
            endTimeArray: [23, 59],
            tempStartTimeArray: [0, 0],
            tempEndTimeArray: [23, 59]
        }
    },
    methods: {
        goBack() {
            // 修改返回方法，显示确认弹出层
            this.$refs.exitConfirmPopup.open();
        },
        confirmExit() {
            // 通知上一页重置状态
            const pages = getCurrentPages();
            const prevPage = pages[pages.length - 2];
            if (prevPage) {
                prevPage.$vm.resetAutoReplyStatus();
            }
            this.$refs.exitConfirmPopup.close();
            uni.navigateBack();
        },
        cancelExit() {
            this.$refs.exitConfirmPopup.close();
        },
        toggleAllDay(e) {
            this.allDay = e.detail.value;
        },
        showStartTimePicker() {
            this.tempStartTimeArray = [...this.startTimeArray];
            this.$refs.startTimePopup.open();
        },
        showEndTimePicker() {
            this.tempEndTimeArray = [...this.endTimeArray];
            this.$refs.endTimePopup.open();
        },
        cancelTimePicker() {
            this.$refs.startTimePopup.close();
            this.$refs.endTimePopup.close();
        },
        onStartTimeChange(e) {
            this.tempStartTimeArray = e.detail.value;
        },
        onEndTimeChange(e) {
            this.tempEndTimeArray = e.detail.value;
        },
        confirmStartTime() {
            this.startTimeArray = [...this.tempStartTimeArray];
            const hour = this.hours[this.startTimeArray[0]];
            const minute = this.minutes[this.startTimeArray[1]];
            this.startTime = `${hour}:${minute}`;
            this.$refs.startTimePopup.close();
        },
        confirmEndTime() {
            this.endTimeArray = [...this.tempEndTimeArray];
            const hour = this.hours[this.endTimeArray[0]];
            const minute = this.minutes[this.endTimeArray[1]];
            this.endTime = `${hour}:${minute}`;
            this.$refs.endTimePopup.close();
        },
        saveSettings() {
            // 保存设置
            const settings = {
                allDay: this.allDay,
                startTime: this.startTime,
                endTime: this.endTime,
                replyMessage: this.replyMessage
            };

            // 这里可以添加保存到服务器或本地存储的逻辑
            console.log('保存自动回复设置:', settings);

            uni.showToast({
                title: '保存成功',
                icon: 'success'
            });

            setTimeout(() => {
                uni.navigateBack();
            }, 1500);
        }
    }
}
</script>

<style lang="scss" scoped>
.auto-reply-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
}

.header {
    background-color: #ffffff;
}

.nav-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60rpx;
    height: 60rpx;
}

.nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    .nav-title {
        font-size: 30rpx;
        font-weight: normal;
        color: #333;
    }
}

.settings-content {
    flex: 1;
    padding: 20rpx 0;
}

.section-title {
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    color: #999;
    background-color: #f5f5f5;
    margin-bottom: 2rpx;
}

.settings-content-wrapper {
    background-color: #ffffff;
    border-radius: 15rpx;
    overflow: hidden;
    margin: 0 15rpx;
    margin-bottom: 20rpx;
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    height: 48rpx;

    &:last-child {
        border-bottom: none;
    }
}

.item-label {
    font-size: 28rpx;
    color: #333;
}

.item-right {
    display: flex;
    align-items: center;

    .time-text {
        font-size: 28rpx;
        color: #333;
        margin-right: 10rpx;
    }
}

.textarea-container {
    position: relative;
}

.reply-input {
    width: 100%;
    min-height: 150rpx;
    font-size: 28rpx;
    color: #333;
    border-radius: 8rpx;
    padding: 20rpx;
    box-sizing: border-box;
}

.word-count {
    position: absolute;
    bottom: 30rpx;
    right: 50rpx;
    font-size: 24rpx;
    color: #999;
}

.save-button-container {
    padding: 30rpx;
}

.save-button {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #007AFF;
    color: #ffffff;
    font-size: 32rpx;
    border-radius: 16rpx;
}

.popup-content {
    background-color: #ffffff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.cancel-btn,
.confirm-btn {
    font-size: 30rpx;
}

.cancel-btn {
    color: #999;
}

.confirm-btn {
    color: #007AFF;
}

.time-picker {
    height: 500rpx;
    width: 100%;
}

.picker-item {
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
}

.confirm-popup {
    padding: 8rpx 16rpx;

    .popup-main {
        background-color: #FFFFFF;
        border-radius: 12rpx;
        margin-bottom: 8rpx;
        overflow: hidden;

        .confirm-content {
            text-align: center;
            font-size: 28rpx;
            color: #999999;
            padding: 40rpx 0;
            border-bottom: 1rpx solid #f5f5f5;
        }

        .confirm-btn {
            width: 100%;
            height: 110rpx;
            line-height: 110rpx;
            text-align: center;
            font-size: 32rpx;
            color: #007AFF;
            background-color: #FFFFFF;
            border: none;
        }
    }

    .popup-footer {
        background-color: #FFFFFF;
        border-radius: 12rpx;
        overflow: hidden;

        .cancel-btn {
            width: 100%;
            height: 110rpx;
            line-height: 110rpx;
            text-align: center;
            font-size: 32rpx;
            color: #333333;
            background-color: #FFFFFF;
            border: none;
        }
    }
}
</style>